<template>
  <div class="home">
    <mt-swipe :auto="6000" class="banner">
      <mt-swipe-item><img class="img" src="../img/img.jpg"></mt-swipe-item>
      <mt-swipe-item><img src="../img/img2.jpg"></mt-swipe-item>
      <mt-swipe-item><img src="../img/img3.jpg"></mt-swipe-item>
      <mt-swipe-item><img src="../img/img4.jpg"></mt-swipe-item>
    </mt-swipe>

    <div class="newsgoods">
        <span></span>
        <p>最新新闻</p>
    </div>

    <div class="newsCon" v-for="news in getNewsList">
      <mt-cell :title="news.title" >
        <span>{{setTime(news.data)}}</span>
        <img slot="icon" :src="`http://127.0.0.1:3000/${news.thumb[0].filename}`" width="160" height="100" />
      </mt-cell>
    </div>

    <div class="newsgoods">
        <span></span>
        <p>最新产品</p>
    </div>

    <div class="goodsCon clear" v-for="goods in getGoodsList">
      <img slot="icon" :src="`http://127.0.0.1:3000/${goods.thumb[0].filename}`" width="160" height="100" class="left"/>
      <div class="left goodsinfo">
        <p>{{goods.title}}</p>
        <p>品牌：{{goods.brand}}</p>
        <p><span class="left">数量：{{goods.quantity}}</span><span class="right">价格：<b>{{goods._price}}</b>元</span></p>
      </div>
    </div>

    <div class="newsgoods">
        <span></span>
        <p>相册</p>
    </div>

    <ul>
      <li v-for="Phone in getPhotoList">
        <img v-lazy="`http://127.0.0.1:3000/${Phone.filename}`" class="photo">
      </li>
    </ul>
  </div>
</template>

<script>

    import {mapGetters} from "vuex";
    import {mapActions} from "vuex";
    import {formatDateTime} from '../date'

    export default{
        methods:{
            ...mapActions(["setNewsList","setGoodsList","setPhoto"]),
            setTime(date){
              return formatDateTime(date)
            }
        },
        computed:{
          ...mapGetters(["getNewsList","getFilter","getGoodsList","getPhotoList"])
        },
        created(){
            this.setNewsList(this.getFilter);
            this.setGoodsList(this.getFilter);
            this.setPhoto({});
        },
    }
</script>

<style scoped>
  .home{
    background:white !important;
  }
  .banner{
    height: 13rem;
  }
  .banner img{
    width: 100%;
  }
  .newsCon{
    margin-top: 0.5rem;
    background:	white;
    margin-bottom: 0.5rem;
  }
  .mint-cell{
    /* background:	#F5F5DC; */
  }
  .newsgoods{
    width:60%;
    height:2rem;
    position: relative;
    margin: 0 auto;
  }
  .newsgoods>span{
    display: block;
    width: 100%;
    height: 1.2rem;
    border-bottom: 1px solid red;
  }
  .newsgoods>p{
    position: absolute;
    top:0;
    left:50%;
    background:	white ;
    width:6rem;
    text-align: center;
    margin-left: -3rem;
    font-size:1.2rem;
    line-height: 2.2rem;
  }

  .goodsCon{
    padding: 0.6rem;
  }
  .goodsCon>.goodsinfo{
    padding: 0.6rem;
  }
  .goodsinfo>p{
    margin-bottom:0.5rem;
    width: 100%;
  }
  .goodsinfo>p>span>b{
    color:red
  }
  .photo[lazy=loading] {
    width: 100%;
    margin: 0 auto;
    background:#888;
    opacity: 0.2;

  }
  .photo {
    width: 60%;
    margin: 0 auto;
    display: block;
  }
</style>

